<script setup>
import { useRouter } from "vue-router";
import { onMounted, computed, ref } from "vue";
import { useStore } from "vuex";
import { getbannerApi  } from '../../api/xiaoqu'
onMounted(() => {
  store.dispatch("xiaoqu/getlist");
  store.dispatch("kecheng/getkecheng");
  store.dispatch("jiaoshi/getjiaoshilist");
  store.dispatch("zixun/getzixunlist");
  store.dispatch("huodong/gethuodong");
  store.dispatch("gongkaike/getgongkaike");
  getbanner();
});

const store = useStore();
let xiaoquList = computed(() => store.state.xiaoqu.list);
let zixunList = computed(() => store.state.zixun.zixunList);
let zixunShouyeList = computed(() => store.state.zixun.shouyelist);
let kechengShouyeList = computed(() => store.state.kecheng.shouyelist);
let jiaoshiShouyeList = computed(() => store.state.jiaoshi.shouyelist);
let gongkaikeShouyeList = computed(() => store.state.gongkaike.shouyelist);




let isOk = ref(null);
let item = ref(null);
const value = ref("请选择校区");
const onConfirm = (v, i) => {
  isOk.value = i;
  value.value = v;
  item.value.toggle(false);
};

const router = useRouter();

const gomsxq = async(id) => {
 await store.commit('jiaoshi/SET_LISTXQ',id)
  router.push("/jsxq");
};
const gokexq = async(id) => {
 await store.commit('kecheng/SET_LISTXQ',id)
  router.push("/kcxq");
};
const gogkkxq = async(id) => {
 await store.commit('gongkaike/SET_LISTXQ',id)
  router.push("/gkkxq");
};

// 点击全部校区获取数据
const getxiaoqulist = () => {
  router.push("/qbxq");
  console.log(store);
};

// 轮播图
const imgurl = ref();
const getbanner = async () => {
  const list = await getbannerApi();
  imgurl.value = list;
};
</script>

<template>
  <div class="sousuo">
    <van-row>
      <van-col span="10">
        <van-dropdown-menu>
          <van-dropdown-item ref="item">
            <template #title>
              <van-icon
                style="margin-right: 5px"
                size="20"
                name="location-o"
              /><span>{{ value }}</span>
            </template>
            <template #default>
              <van-grid :gutter="10" :border="false" :column-num="3">
                <van-grid-item v-for="(ite, index) in xiaoquList" :key="index">
                  <template #text>
                    <span
                      class="xiaoqu"
                      :class="{ but: isOk == ite._id }"
                      @click="onConfirm(ite.name, ite._id)"
                    >
                      {{ ite.name }}
                    </span>
                  </template>
                </van-grid-item>
              </van-grid>
            </template>
          </van-dropdown-item>
        </van-dropdown-menu>
      </van-col>
      <van-col span="14">
        <van-search
          v-model="value1"
          placeholder="请输入搜索关键词"
          @search="onSearch"
        />
      </van-col>
    </van-row>
  </div>
  <div class="box">
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="(item , index) in imgurl" :key="index">
        <img :src="item.avatar" alt="">
      </van-swipe-item>
    </van-swipe>
    <van-grid clickable="true" icon-size="35px">
      <van-grid-item to="/xkzx" icon="home-o" text="选课中心" />
      <van-grid-item to="/gkk" icon="tv-o" text="公开课" />
      <van-grid-item to="/rmhd" icon="fire-o" text="热门活动" />
      <van-grid-item @click="getxiaoqulist" icon="location-o" text="全部校区" />
    </van-grid>
  </div>

  <div class="mstj box">
    <van-cell title="名师推荐" is-link value="更多" to="/mstj" />
    <van-swipe class="msjs" :show-indicators="false" :loop="false" :width="200">
      <van-swipe-item @click="gomsxq(item._id)" class="msjsbk" v-for="(item,index) in jiaoshiShouyeList" :key="index">
        <div class="msjsimg"></div>
        <div class="msjstxt">
          <span>{{item.name}}</span>
          <br />
          <span>{{item.teacherType}}</span>
        </div>
      </van-swipe-item>
    </van-swipe>
  </div>
  <!-- 推荐课程 -->
  <div class="box">
    <van-cell title="推荐课程" is-link value="更多" @click="gokexq" />
    <van-grid :column-num="2">
      <van-grid-item to="/kcxq" v-for="(item,index) in kechengShouyeList" :key="index">
        <van-cell :border="false" size="5px" :title="item.name" icon="location-o" />
        <van-cell :border="false" :title="item.campus" icon="location-o" />
        <van-cell :border="false" :title="item.startTime + item.finishTime" icon="location-o" />
        <div class="sy-tjjg">￥{{item.skPrice}}/{{item.hour}}</div>
      </van-grid-item>
      
    </van-grid>
  </div>
  <!-- 公开课 -->
  <div class="box">
    <van-cell title="公开课" is-link value="更多" to="/gkk" />
    <van-grid :column-num="2">
      <van-grid-item @click="gogkkxq(item._id)" v-for="(item,index) in gongkaikeShouyeList" :key="index">
        <div class="gke">
          <img :src="item.avatar" alt="" />
          <span>{{item.name}}</span>
          <div class="gke-rs"><span>已报人数{{item.num}}人</span><span>{{item.entryFee}}</span></div>
        </div>
      </van-grid-item>
    </van-grid>
  </div>
  <!-- 咨询 -->
  <div class="box-d">
    <van-cell title="咨询" is-link value="更多" to="/zixun" />
    <van-grid :column-num="1">
      <van-grid-item to="/zxxq" v-for="(item , index) in zixunShouyeList" :key="index">
        <div class="box-de">
          <van-row>
            <van-col span="8">
              <div class="gke">
                <img :src="item.avatar" />
              </div>
            </van-col>
            <van-col span="16"
              ><span class="zx-titol">{{item.name}}</span>
              <div class="zx-box">
                <span>{{item.uploadTime}}</span
                ><span><van-icon name="browsing-history-o" />1000</span>
              </div></van-col
            >
          </van-row>
        </div>
      </van-grid-item>
    </van-grid>
  </div>
</template>



<style  scoped>
.xiaoqu {
  border: 2px solid red;
  padding: 5px 10px;
  background-color: aqua;
}
.but {
  background-color: red;
  border: 2px solid aqua;
}
.sousuo {
  width: 100%;
  height: 55px;
  font-weight: 600;

  background-color: #fff;
  position: fixed;
  top: 0;
  z-index: 999;
}
.box-de {
  border-bottom: 2px solid #c8c9cc;
}
.gke {
  padding: 5px;
}
.zx-box > span {
  padding-top: 20px;
  color: darkgray;
}
.zx-box {
  font-size: 14px;
  padding: 20px 5px;
  display: flex;
  justify-content: space-between;
}
.zx-titol {
  display: block;
  font-size: 14px;
  padding: 10px;
}
.box {
  padding-top: 55px;
  border-bottom: 10px solid #c8c9cc;
}
.gke-rs {
  padding: 10px 5px;
  display: flex;
  justify-content: space-between;
  font-size: 10px;
}
.gke-rs > span:first-child {
  color: darkgray;
}
.gke-rs > span:last-child {
  color: red;
}
.gke img {
  margin: 0 auto;
  width: 100px;
  display: block;
}
.gke > span {
  font-size: 12px;
  padding: 10px 5px;
  display: block;
}
.gke {
  padding: 6px 3px;
  width: 100%;
}
.sy-tjjg {
  color: red;
  width: 100%;
  font-size: 8px;
  padding: 2px 2px 0 7px;
}
.van-grid-item .van-cell {
  padding: 2px 2px 0 2px;
}
.msjsbk {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.msjstxt {
  font-size: 15px;
  color: #000;
  width: 120px;
  height: 60px;
}
.msjsimg {
  background-color: aqua;
  width: 100px;
  height: 120px;
}
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
  background-color: #39a9ed;
}
.van-grid {
  margin-top: 8px;
}
.mstj {
  margin-top: 14px;
  padding-bottom: 20px;
  /* background-color: #39a9ed; */
  /* width: 100%; */
}
.msjs {
  height: 150px;
}

.msjs .van-swipe-item {
  color: #fff;
  font-size: 20px;
  text-align: center;
}
.mstj_bt {
  height: 35px;
  border-bottom: 1px solid #000;
  display: flex;
  justify-content: space-between;
}

.mstj_bt span {
  font-size: 20px;
}
.box-d {
  padding-bottom: 50px;
}
a {
  color: black;
}
</style>